import 'package:flutter/material.dart';
import 'res/list_data.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: Scaffold(
        appBar: AppBar(title: Text("app")),
        body: MyHomePage(),
      ),
    );
  }
}

//一行
// class MyHomePage extends StatelessWidget {
//   const MyHomePage({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return GridView.count(
//       crossAxisCount: 3, //一行数量
//       children: [
//         Icon(Icons.home_filled),
//         Icon(Icons.abc_outlined),
//         Icon(Icons.abc_outlined),
//         Icon(Icons.abc_outlined),
//         Icon(Icons.abc_outlined),
//         Icon(Icons.abc_outlined),
//       ],
//     );
//   }
// }

//一行多列
// class MyHomePage extends StatelessWidget {
//   const MyHomePage({super.key});

//   List<Widget> _initGridViewData() {
//     List<Widget> tempList = [];
//     for (var i = 0; i < 12; i++) {
//       tempList.add(
//         Container(
//           alignment: Alignment.center,
//           decoration: const BoxDecoration(color: Colors.blueGrey),
//           child: Text("第${i}个元素", style: TextStyle(fontSize: 20)),
//         ),
//       );
//     }
//     return tempList;
//   }

//   @override
//   Widget build(BuildContext context) {
//     return GridView.count(
//       padding: EdgeInsets.all(10),
//       crossAxisCount: 2, //一行的数量
//       crossAxisSpacing: 10, //水平间距
//       mainAxisSpacing: 10, //垂直间距
//       childAspectRatio: 1.2, //宽高比例
//       children: _initGridViewData(),
//     );
//   }
// }

//使用SliverGridDelegateWithFixedCrossAxisCount
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  Widget _initGridViewData(context, index) {
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.teal)),
      child: Column(
        children: [
          Expanded(
            child: Image.network(
              listData[index]["imageUrl"],
              fit: BoxFit.cover, // 保持图片比例，填充容器
              width: double.infinity, // 宽度填满
            ),
          ),
          const SizedBox(height: 10),
          //Text(listData[index]["title"], style: const TextStyle(fontSize: 18)),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              listData[index]["title"],
              style: const TextStyle(fontSize: 18),
              maxLines: 1, // 限制行数
              overflow: TextOverflow.ellipsis, // 超出显示省略号
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(10),
      itemCount: listData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 使用SliverGridDelegateWithFixedCrossAxisCount
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        crossAxisCount: 2,
        childAspectRatio: 1,
      ),
      itemBuilder: _initGridViewData,
    );
  }
}
